<HTML>
	<HEAD>
	<TITLE></TITLE>
	<link rel="stylesheet" type="text/css" href="css/persist.css"/>
	</HEAD>

<BODY>

<script type="text/javascript" src="../js/Util.js"></script>
<script type="text/javascript" src="../js/3rd_party/persist-js-0.1.0/persist.js"></script>
<script type="text/javascript" src="../js/3rd_party/json2/json2-min.js"></script>

<form id="address_form">
	<div>first name      : <input id="form_first_name" /></div>
	<div>last name       : <input id="form_last_name" /></div>
	<div>street address  : <input id="form_street" /></div>
	<div>street address2 : <input id="form_street2" /></div>
	<div>city            : <input id="form_city" /></div>
	<div>state           : <input id="form_state" /></div>
	<div>zip             : <input id="form_zip" /></div>
	<input type="submit" value="store" onclick="peristForm()"/>
</form>

<script type="text/javascript">

var store;

var init = function() {
	Util.valu( 'konsole', '' );

	/* create the storage */
	store = new Persist.Store( 'persistence demo' );
	konsole( 'MaxSize: ' + ( ( Persist.size < 0 ) ? 'unknown' : Persist.size ) );
	konsole( 'Backend: ' + Persist.type || 'none' );

	/* fill the form using the 'form_bean' */
	fillForm();
};

/* pull the 'form_bean' from the store and fill the form with JSON */
var fillForm = function() {
	var value = store.get( 
		'form_bean'
		, function( ok, value ) {
			if ( ok && value ) {
				JSON.parse( new String( value ) , formFiller );
			}
		}
	);
};

/* a really simple mapping */
var formFiller = function( key, value ) {
	Util.valu( 'form_' + key, value );
};

/* persist the user's data */
var peristForm = function() {
	var bean = {};

	/* this will create the "bean" dynamicly" */
	Util.walkNodes( 
		Util.id( 'address_form' )
		, function( node ) { 
			return Util.isTag( node, 'INPUT' ) && node.getAttribute( 'id' ); 
		}
		, function( node ) {
			var name = node.getAttribute( 'id' ).replace( /form_/, '' );
			/* FIXME: this is a little ... foul... */
			eval( 'bean.' + name + ' = \'' + node.value + '\';' );
		}
	);

	konsole( 'stringifying form' );
	var stringed = JSON.stringify( bean );

	konsole( 'persisting form: ' + stringed );
	store.set( 'form_bean', stringed );

	konsole( 'persisted form' );
};

var konsole = function( message ) {
	//alert( message );
	Util.valu( 'konsole', message + '\n' + Util.valu( 'konsole' ) );
};

Util.addOnLoadCallback( init );

</script>

<div>
	<div style="position:relative;top:40px;">

		<div style="width:500px;float:left">

			<li><a href="http://www.thomasfrank.se/sessionvars.html">http://www.thomasfrank.se/sessionvars.html</a></li>
			<li><a href="http://code.google.com/p/s3fs/wiki/FuseOverAmazon">http://code.google.com/p/s3fs/wiki/FuseOverAmazon</a></li>
			<li><a href="http://members.tele2.nl/MAvanEverdingen/Code/">http://members.tele2.nl/MAvanEverdingen/Code/</a></li>
			<li><a href="http://pablotron.org/?cid=1557">http://pablotron.org/?cid=1557</a></li>

			<pre style="width:400px;float:left">
http://www.reddit.com/info/6kd4i/comments/

Same issues with FF 2.0.0.14 on test-pages 
>> Security error" code: "1000.

Problems only occurs locally when pages are 
loaded directly or with localhost/computer_name 
as hostname. Does not occur when using 127.0.0.1
or local IP.
			</pre>
		</div>
		<textarea style="float:right" id="konsole" cols="60" rows="12"></textarea>
	</div>
</div>

</BODY>
</HTML>
